<template>
  <view class="page-wrap">
    <PageHeader v-if="headerData" :headerData="headerData"/>
    <PageSearch v-if="searchData" :searchData="searchData" @input="handleInput"/>
    <PageTab v-if="tabData" :tabData="tabData" @tab-filter="handleTabFilter"/>
    <PageBody>
      <template #item>
        <slot v-for="(item,index) in tableData" :key="index" :item="item" name="item"></slot>
      </template>
    </PageBody>
  </view>
</template>

<script>
/**
 * 主页面
 */
export default {
  name: "page-model"
}
</script>

<script setup>
import {
  ref, nextTick
} from "vue"
import PageHeader from "@/frame/components/page-header/index.vue"
import PageTab from "@/frame/components/page-tab/index.vue"
import PageSearch from "@/frame/components/page-search/index.vue"
import PageBody from "@/frame/components/page-body/index.vue"
import {processRequest} from "../../apis/request"

/**
 * props传入
 */
const props = defineProps({
  config: {}
})

/**
 * 提取数据
 */
const configData = ref(props.config)
const headerData = ref(configData.value.header)
const searchData = ref(configData.value.search)
const tabData = ref(configData.value.tab)
const bodyData = ref(configData.value.body)

/**
 * 搜索数据
 */
const formData = ref({})

/**
 * 列表数据
 */
const tableData = ref([])

/**
 * 监听tab栏修改
 */
const handleTabFilter = (value) => {
  formData.value = {
    ...formData.value,
    ...value
  }
  refreshTableData()
}

/**
 * 提交
 */
const refreshTableData = async () => {
  const result = await processRequest({
    api: configData.value.url,
    method: configData.value.method,
    data: {
      ...configData.value.otherParams,
      ...formData.value
    }
  })
  tableData.value = result.dataList
}

/**
 * 获取输入值
 */
const handleInput = (value) => {
  formData.value[searchData.value.prop] = value[searchData.value.prop]
  refreshTableData()
}

/**
 * 获取初始化数据
 */
const initData = () => {
  if (searchData.value) {
    if (searchData.value.initData) {
      formData.value[searchData.value.prop] = searchData.value.initData
    }
  }
  if (tabData.value) {
    if (tabData.value.initData) {
      formData.value[tabData.value.prop] = tabData.value.initData
    }
  }
  refreshTableData()
}

initData()
</script>

<style lang="scss" scoped src="./index.scss">

</style>